<template>
  <el-dialog :title="title"
    :visible.sync="visible"
    width="500px"
    :close-on-click-modal="false"
    @close="close"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <el-form-item label="项目：" prop="app_id" >
        <el-select v-model="form.app_id" v-if='!isView && !isEdit'
            placeholder="请选择"
          >
            <el-option v-for="item in permission_projectList" :key="item.dictValue"
              :label="item.name"
              :value="item.app_id" />
          </el-select>
          <span v-else>{{ form.app_id | translateToName(permission_projectList,'app_id','name') }}</span>
      </el-form-item>
      <div class="unit-title">非会员设置</div>
      <el-form-item label="同时在线设备" prop="user_online_device" >
        <el-input-number v-if='!isView' :min="0" v-model="form.user_online_device" :precision="0" clearable size="small"  />
        <div v-else>{{ form.user_online_device }}</div>
      </el-form-item>
      <el-form-item label="设备登录受限指引" prop="user_online_lift" >
        <template v-if='!isView'>
          <el-radio v-model="form.user_online_lift" label="hand">用户解除</el-radio>
          <el-radio v-model="form.user_online_lift" label="auto">自动解除</el-radio>
        </template>
        <div v-else>{{ ({'hand':'用户解除','auto':'自动解除'})[form.user_online_lift] || '' }}</div>
      </el-form-item>
      <el-form-item label="历史登录设备" prop="user_history_device" >
        <el-input-number v-if="!isView" :min="0" v-model="form.user_history_device" :precision="0" clearable size="small"  />
        <div v-else>{{ form.user_history_device }}</div>
      </el-form-item>
      <el-form-item label="设备登录受限指引" prop="user_history_lift" >
        <template v-if='!isView'>
          <el-radio v-model="form.user_history_lift" label="admin">管理员解除</el-radio>
        </template>
        <div v-else>{{ ({'admin':'管理员解除'})[form.user_history_lift] || '' }}</div>
      </el-form-item>
      <div  class="unit-title">会员设置</div>
      <el-form-item label="同时在线设备" prop="vip_online_device" >
        <el-input-number v-if="!isView"  :min="0" v-model="form.vip_online_device" :precision="0" clearable size="small"  />
        <div v-else>{{ form.vip_online_device }}</div>
      </el-form-item>
      <el-form-item label="设备登录受限指引" prop="vip_online_lift" >
        <template v-if='!isView'>
          <el-radio v-model="form.vip_online_lift" label="hand">用户解除</el-radio>
          <el-radio v-model="form.vip_online_lift" label="auto">自动解除</el-radio>
        </template>
        <div v-else>{{ ({'hand':'用户解除','auto':'自动解除'})[form.vip_online_lift] || '' }}</div>
      </el-form-item>
      <el-form-item label="历史登录设备" prop="vip_history_device" >
        <el-input-number v-if="!isView"  :min="0" v-model="form.vip_history_device" :precision="0" clearable size="small"  />
        <div v-else>{{ form.vip_history_device }}</div>
      </el-form-item>
      <el-form-item label="设备登录受限指引" prop="vip_history_lift" >
        <template v-if='!isView'>
          <el-radio v-model="form.vip_history_lift" label="admin">管理员解除</el-radio>
        </template>
        <div v-else>{{ ({'admin':'管理员解除'})[form.vip_history_lift] || '' }}</div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" v-if="!isView" @click="submitForm">{{ submitText }}</el-button>
      <el-button @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { addDevice, updateDevice, getDeviceList } from '@/api/operations/device'

export default {
  name: 'DeviceManageAddDialog',
  data () {
    const appIdVersion = (rule, value, callback) => {
      if (value) {
        if (this.type === 'create') {
          getDeviceList({
            page: 1,
            page_size: 5,
            appid: value
          }).then(res => {
            if (res && res.data && res.data.list && res.data.list.length) {
              callback(new Error('当前项目已存在，请重新选择项目'))
            } else {
              callback()
            }
          })
        } else {
          callback()
        }
      } else {
        callback(new Error('请选择项目'))
      }
    }

    return {
      item: null,
      type: '',
      visible: false,
      form: {
        app_id: undefined,
        user_online_device: 0,
        user_history_device: 0,
        user_history_lift: 'admin',
        user_online_lift: '',
        vip_online_device: 0,
        vip_history_device: 0,
        vip_history_lift: 'admin',
        vip_online_lift: ''
      },
      rules: {
        app_id: { required: true, validator: appIdVersion }
      }
    }
  },
  computed: {
    ...mapGetters('zcsd-core', ['permission_projectList']),
    title () {
      const typeText = this.isEdit ? '编辑' : this.isView ? '查看' : '新增'
      return `${typeText}设备限制`
    },
    submitText () {
      return this.isEdit ? '更新' : '新增'
    },
    isView () {
      return this.type === 'view'
    },
    isEdit () {
      return this.type === 'edit'
    }
  },
  methods: {
    open (item, type) {
      this.resetForm('form')
      this.visible = true
      this.item = item || null
      this.type = type || 'create'

      this.$nextTick(() => {
        if (['view', 'edit'].includes(this.type) && this.item) {
          Object.assign(this.form, { ...this.item })
        }
      })
    },
    close () {
      this.visible = false
      this.item = null
    },
    submit () {
      const submitData = { ...this.form }
      const keyList = ['user_online_device', 'user_history_device', 'vip_online_device', 'vip_history_device']
      keyList.forEach(item => {
        if (submitData[item] === 0) {
          submitData[item] = 99999
        }
      })
      if (this.item && this.isEdit) {
        updateDevice(submitData).then(res => {
          if (res.code === 200) {
            this.close()
            this.$emit('update')
            this.msgSuccess('更新成功')
          }
        })
        return
      }

      addDevice(submitData).then(res => {
        if (res.code === 200) {
          this.close()
          this.$emit('update')
          this.msgSuccess('新增成功')
        }
      })
    },
    submitForm () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submit()
        } else {
          return false
        }
      })
    }
  },
  created () {
  }
}
</script>

<style lang="scss" scoped>
  .svg-icon {
    margin-left: 5px;
    margin-top: 2px;
  }
  .unit-title{
    width:140px;
    text-align:right;
    margin-bottom:20px;
    font-size:16px;
    font-weight:bold;
  }
</style>
